<template>
	<view class="page-content">
		<u-navbar title="详情" autoBack bgColor="#D9EDD4" fixed safeAreaInsetTop placeholder="">
			<view class="navbar-right" slot="right">
				<u-icon size="22" class="car-icon" @click="gonavigate('/pages/index/shopCar/shopCar')"
					name="/static/images/goods/detail/icon_detail-car.png"></u-icon>
				<u-icon size="22" class="share-icon" name="/static/images/goods/detail/icon_detail-share.png"></u-icon>
			</view>
		</u-navbar>

		<view class="container">
			<view class="goods-content">
				<view class="goods-img">
					<view class="swiper">
						<u-swiper :list="list" :height="300" @change="changeSwiper" circular :autoplay='false'
							indicatorStyle="right: 20px">
							<view slot="indicator" class="indicator-num">
								<text class="indicator-num_text">{{ currentNum + 1 }}/{{ list.length }}</text>
							</view>
						</u-swiper>
					</view>
					<view class="second-menu">
						<view class="menu-text" :class="{'menu-active':swiperIndex==1}" @click="changePage(1)">商品</view>
						<view class="menu-text" :class="{'menu-active':swiperIndex==2}" @click="changePage(2)">规格</view>
						<view class="menu-text" :class="{'menu-active':swiperIndex==3}" @click="changePage(3)">分级</view>
					</view>
				</view>

				<view class="goods-container">
					<view class="goods-info">
						<view class="info-top">
							<view class="top-left">
								<view class="top-price">￥{{goodsData.price}}万</view>
								<view class="top-vipPrice">
									<view class="vipPrice-text">￥{{goodsData.price-1.5}}万</view>
									<view class="vipPrice-icon">
										<text class="vip-text">vip价</text>
									</view>
								</view>
							</view>
							<view class="top-sell">已售102</view>
						</view>
						<view class="info-center">
							{{goodsData.travelName}}
						</view>
						<view class="info-bottom">
							<view class="btm-left">包邮</view>
							<u-line direction="col" length="13" color="#666"></u-line>
							<view class="btm-center">7天无理由退货</view>
							<u-line direction="col" length="13" color="#666"></u-line>
							<view class="btm-right" color="#666">极速退款</view>
						</view>
					</view>

					<view class="goods-shop">
						<view class="shop-top">
							<view class="shopInfo-left">
								<u-avatar shape="square" size="54"
									src="/static/images/avatar/avatar-ring.jpg"></u-avatar>
								<view class="shopInfo-box">
									<view class="shopInfo-row1">
										<view class="shop-name">{{goodsData.shop}}</view>
										<view class="shop-grade">4.6</view>
									</view>
									<view class="shopInfo-row2">
										<view class="shop-rang">卖家口碑</view>
										<u-rate size="12" gutter="1" :count="5" v-model="rateValue"></u-rate>
									</view>
									<view class="shopInfo-row3">
										粉丝：8.2万
									</view>
								</view>
							</view>
							<view class="shop-right" @click="goShopDetail('/pages/goods/shopDetail?shop='+goodsData.shop)">
								进店逛逛
								<u-icon size="12" name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="shop-btm">
							<view class="btm-sure">
								<u-icon size="23" name="/static/images/goods/detail/icon_detail-sure.png"></u-icon>
								<text class="shop-sure">店铺保障</text>
							</view>
							<view class="btm-text">
								<view class="right-1">
									<u-icon size="15" name="/static/images/goods/detail/icon_detail-yes.png"></u-icon>
									<text class="right-text">免运费</text>
								</view>
								<view class="right-2">
									<u-icon size="15" name="/static/images/goods/detail/icon_detail-yes.png"></u-icon>
									<text class="right-text">官方正品</text>
								</view>
								<view class="right-3">
									<u-icon size="15" name="/static/images/goods/detail/icon_detail-yes.png"></u-icon>
									<text class="right-text">极速退款</text>
								</view>
							</view>
						</view>
					</view>

					<view class="goods-detail">
						<view class="specification">
							<view class="detail-title">
								规格
							</view>
							<view class="detail-top">
								<view class="top-address">
									<view class="top-name">产地</view>
									<view class="top-text">缅甸</view>
								</view>
								<view class="top-size">
									<view class="top-name">尺寸</view>
									<view class="top-text">53*9.5毫米</view>
								</view>
								<view class="top-flaw">
									<view class="top-name">瑕疵</view>
									<view class="top-text">无裂</view>
								</view>
							</view>
							<view class="detail-center">
								<view class="btm-info" v-for="(item,index) in detailData" :key="index">
									<view>{{item.name}}</view>
									<view>{{item.textName}}</view>
								</view>
							</view>
						</view>

						<view class="classification">
							<view class="detail-title">分级</view>
							<view class="grade-report">
								<view class="grade-top">
									<view class="grade-title">分级结论</view>
									<view class="garde-text">冰糯种浅绿色手镯</view>
									<u--image width="150" height="150" radius='10'
										:src="list[0]"></u--image>
								</view>
								<view class="grade-btm">
									<view class="grade-title">分级信息</view>
									<view class="grade-info">
										<view class="info-species">
											<view class="species">种</view>
											<u-line length="66"></u-line>
											<view class="species-text">冰糯种</view>
										</view>
										<view class="info-water">
											<view class="species">水</view>
											<u-line length="66"></u-line>
											<view class="species-text">亚透明</view>
										</view>
										<view class="info-color">
											<view class="species">色</view>
											<u-line length="66"></u-line>
											<view class="species-text">绿蓝色</view>
										</view>
									</view>
								</view>
							</view>
							<view class="grade-species">

							</view>
							<view class="grade-water">

							</view>
							<view class="grade-color">

							</view>
						</view>
					</view>

					<view class="white-spapce"></view>
				</view>
			</view>

			<view class="consult-bottom">
				<view class="consult-left">
					<u-avatar mode="aspectFill" size="45" src="/static/images/avatar/avatar-consult.jpg"></u-avatar>
				</view>

				<view class="consult-right">
					<button class="add-shopCar" @click="addShopCar()">加入购物车</button>
					<button class="go-account" @click="goShopDetail('/pages/account/account?travelId='+goodsId)">结算</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// goodsId
				goodsId: '',
				// swpier当前id
				currentNum: 0,
				list: [],
				// 点击Index切换
				swiperIndex: 1,
				// 店铺评分
				rateValue: 4.5,
				// 商品data
				goodsData: [],
				// 规格下的参数
				detailData: [{
						name: '货号',
						textName: '03154564812012',
					},
					{
						name: '材质',
						textName: '翡翠',
					},
					{
						name: '款式',
						textName: '手镯，正圈',
					},
					{
						name: '色彩',
						textName: '满色',
					},
					{
						name: '镶嵌材质',
						textName: '无镶嵌',
					}
				],
			}
		},
		onLoad(e) {
			this.goodsId = e.travelId
		},
		mounted() {
			// 获取商品数据
			uni.request({
				url: 'http://localhost:3000/travel/getTravelsById',
				data: {
					travelId: this.goodsId,
				},
				success: (res) => {
					if (res?.data?.code == 200) {
						this.goodsData = res.data.data;
						// 处理图片
						let re = /\([^\)]+\)/g;
						let picList = this.goodsData.content;
						picList = picList.match(re)
						for(let i=0;i<picList.length;i++){
							let pic = picList[i].substring(1,picList[i].length-1)
							this.list.push(pic)
						}
					} else {
						this.$u.toast(res?.data?.data?.message);
					}
				},
				fail: (res) => {
					this.$u.toast(res?.data?.msg);
				}
			})
		},
		methods: {
			// swiper
			changeSwiper(e) {
				this.currentNum = e.current;
			},
			// 滑动页面
			changePage(swiperIndex) {
				this.swiperIndex = swiperIndex;
			},
			// 跳转页面
			gonavigate(pageUrl) {
				uni.switchTab({
					//保留当前页面，跳转到应用内的某个页面
					url: pageUrl
				})
			},
			goShopDetail(pageUrl) {
				uni.navigateTo({
					url: pageUrl
				})
			},
			// 加入购物车
			addShopCar() {
				uni.request({
					url: 'http://localhost:3000/order/add',
					method: "POST",
					data: {
						content: this.goodsData.travelName,
						price: this.goodsData.price,
						userId: uni.getStorageSync("userId"),
						// 未付款
						status: 0,
						travelId: this.goodsId,
					},
					success: (res) => {
						if (res?.data?.code == 200) {
							this.$u.toast("添加成功");
						} else {
							this.$u.toast(res.data.data.message);
						}
					},
					fail: (res) => {
						console.log('失败');
						this.$u.toast(res?.data?.msg);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-content {
		.navbar-right {
			display: flex;
			align-items: center;

			.car-icon {
				padding: 0 $uni-spacing-row-base;
			}

			.share-icon {
				padding: 0 $uni-spacing-row-sm;
			}
		}

		.container {
			.goods-content {
				.goods-img {
					.swiper {
						.indicator-num {
							padding: 2px 0;
							background-color: rgba(0, 0, 0, 0.35);
							border-radius: 100px;
							@include flex;
							justify-content: center;

							&_text {
								color: $uni-text-color-disable;
								font-size: $uni-font-size-sm;
								padding: 0 $uni-spacing-row-base;
							}
						}

						/deep/.u-swiper__indicator {
							bottom: 25px;
						}
					}

					.second-menu {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						background-color: rgba(0, 0, 0, 0.4);
						padding: $uni-spacing-col-sm $uni-spacing-row-sm;
						position: absolute;
						top: 44px;

						.menu-text {
							font-size: $uni-font-size-lg;
							color: $uni-text-color-inverse;
							padding: $uni-spacing-col-sm $uni-spacing-row-sm;
						}

						.menu-active {
							color: #90c98e;
						}
					}
				}

				.goods-container {
					width: 370.4px;
					margin: 0 $uni-spacing-row-base;
					position: absolute;
					.goods-info {
						background-color: $gs-jpBg;
						border-radius: 10px;
						padding: $uni-spacing-col-base $uni-spacing-row-lg;
						margin-top: -18px;
						.info-top {
							display: flex;
							align-items: flex-end;
							justify-content: space-between;

							.top-left {
								display: flex;
								align-items: flex-end;

								.top-price {
									font-size: $gs-font-lg;
									color: $uni-text-color;
								}

								.top-vipPrice {
									display: flex;
									padding: 0 $uni-spacing-row-base;

									.vipPrice-text {
										font-size: $uni-font-size-lg;
										color: $gs-color-hot;
									}

									.vipPrice-icon {
										background-image: url("@/static/images/goods/detail/icon_detail-vipBg.png");
										background-size: cover;
										background-position: center center;
										background-repeat: no-repeat;

										.vip-text {
											font-size: $uni-font-size-base;
											color: $gs-color-vip;
											padding: $uni-spacing-col-sm 7px;
											line-height: 22px;
										}
									}
								}
							}

							.top-sell {
								font-size: $uni-font-size-sm;
								color: $gs-color-grey;
							}
						}

						.info-center {
							font-size: $uni-font-size-base;
							color: $uni-text-color;
							padding: $uni-spacing-col-sm 0;
						}

						.info-bottom {
							display: flex;
							align-items: center;
							font-size: $uni-font-size-base;
							color: $gs-color-grey;
							justify-content: space-around;
						}
					}

					.goods-shop {
						background-color: $gs-jpBg;
						border-radius: 10px;
						padding: $uni-spacing-col-base $uni-spacing-row-lg;
						margin: $uni-spacing-col-base 0;
						.shop-top {
							display: flex;
							justify-content: space-between;
							padding: $uni-spacing-col-base 0;

							.shopInfo-left {
								display: flex;
								padding: 0 $uni-spacing-row-base;

								.shopInfo-box {
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									padding: 0 $uni-spacing-row-base;

									.shopInfo-row1 {
										display: flex;

										.shop-name {
											font-size: $uni-font-size-base;
											color: $uni-text-color;
										}

										.shop-grade {
											font-size: $uni-font-size-sm;
											color: $uni-color-warning;
										}
									}

									.shopInfo-row2 {
										display: flex;

										.shop-rang {
											font-size: $uni-font-size-sm;
											color: $gs-color-grey;
										}
									}

									.shopInfo-row3 {
										font-size: $gs-font-sm;
										color: $gs-color-grey;
									}
								}
							}

							.shop-right {
								display: flex;
								align-items: center;
								font-size: $uni-font-size-sm;
								color: $uni-text-color-grey;
							}
						}

						.shop-btm {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: $uni-spacing-col-sm 0;

							.btm-sure {
								display: flex;
								align-items: center;
								padding: 0 $uni-spacing-row-sm;

								.shop-sure {
									font-size: $uni-font-size-sm;
									color: #1B7006;
									padding: 0 $uni-spacing-row-sm;
								}
							}

							.btm-text {
								display: flex;
								align-items: center;

								.right-1,
								.right-2,
								.right-3 {
									display: flex;

									.right-text {
										font-size: $uni-font-size-sm;
										color: $gs-color-grey;
										padding: 0 $uni-spacing-row-sm;
									}
								}
							}
						}
					}

					.goods-detail {
						background-color: $gs-jpBg;
						border-radius: 10px;
						padding: $uni-spacing-col-base $uni-spacing-row-lg;
						margin: $uni-spacing-col-base 0;
						.specification {
							margin: $uni-spacing-col-base 0;

							.detail-title {
								font-size: $gs-font-base;
								color: $uni-text-color;
								padding: $uni-spacing-col-sm $uni-spacing-row-sm;
							}

							.detail-top {
								display: flex;
								justify-content: space-evenly;

								.top-address,
								.top-size,
								.top-flaw {
									display: flex;
									flex-direction: column;
									align-items: center;
									padding: $uni-spacing-col-base 0;

									.top-name {
										font-size: $uni-font-size-base;
										color: #383838;
									}

									.top-text {
										font-size: $uni-font-size-sm;
										color: $gs-color-green;
										padding: $uni-spacing-col-sm 0;
									}
								}
							}

							.detail-center {
								background-color: #E8F0E6;
								border-radius: $uni-border-radius-lg;
								padding: $uni-spacing-col-base $uni-spacing-row-lg;

								.btm-info {
									display: flex;
									justify-content: space-between;
									font-size: $uni-font-size-base;
									color: #383838;
									padding: $uni-spacing-col-sm 0;
								}
							}
						}

						.classification {
							margin: $uni-spacing-col-base 0;

							.detail-title {
								font-size: $gs-font-base;
								color: $uni-text-color;
								padding: $uni-spacing-col-base $uni-spacing-row-sm;
							}

							.grade-report {
								.grade-top {
									text-align: center;

									.grade-title {
										font-size: $uni-font-size-lg;
										color: $gs-color-green;
									}

									.garde-text {
										font-size: $uni-font-size-base;
										margin: $uni-spacing-col-base 0;
									}

									/deep/.u-image {
										margin: 0 auto;
									}
								}

								.grade-btm {
									margin: $uni-spacing-col-base 0;

									.grade-title {
										text-align: center;
										color: $gs-color-green;
										margin: $uni-spacing-col-lg 0;
									}

									.grade-info {
										display: flex;
										justify-content: space-evenly;

										.info-species,
										.info-water,
										.info-color {
											display: flex;
											flex-direction: column;
											align-items: center;
											background-color: #E8F0E6;
											border-radius: $uni-border-radius-lg;
											padding: $uni-spacing-col-base $uni-spacing-row-lg;

											.species {
												font-size: $uni-font-size-sm;
												color: $uni-text-color;
											}

											.species-text {
												font-size: $uni-font-size-base;
												color: $gs-color-green;
												margin: $uni-spacing-col-base 0;
											}
										}
									}
								}
							}
						}
					}

					.white-spapce {
						height: 80px;
					}

				}
			}

			.consult-bottom {
				width: 100%;
				position: fixed;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: space-around;
				background-color: $gs-jpBg;
				padding: $uni-spacing-col-base $uni-spacing-row-sm;
				.consult-right {
					display: flex;
					align-items: center;
					.add-shopCar {
						width: 100px;
						border-radius: 10px 0 0 10px;
						background-color: #383838;
						font-size: $uni-font-size-base;
						color: $uni-text-color-inverse;
						padding: $uni-spacing-col-base $uni-spacing-row-sm;
					}
					.go-account {
						width: 100px;
						border-radius: 0 10px 10px 0;
						background-color: #719470;
						font-size: $uni-font-size-base;
						color: $uni-text-color-inverse;
						padding: $uni-spacing-col-base $uni-spacing-row-sm;
					}
				}
			}
		}

		.consult-bottom {}
	}
</style>